<template>
  <div class="houseTenant">
    <div class="tabs">
      <i-tabs
        color="#008cee"
        :current="tabActive"
        @change="tabChange">
        <i-tab key="now" title="当前入住房间"></i-tab>
        <i-tab key="history" title="历史入住房间"></i-tab>
      </i-tabs>
    </div>

    <div class="wrapper">
      <div class="list">
        <div
          v-for="(item, index) in listFilter"
          :key="item.id"
          class="detail">
          <i-swipeout
            :operate-width="0"
            :unclosable="false"
            :toggle="false">
            <div class="list-swipeout" slot="content" @tap="detailClick(item)">
              <div class="info">
                <div class="title">{{item.roomNo}}</div>
                <div class="local">{{item.roomAddress}}</div>
                <div class="desc">
                  <span class="price">租金：¥ <span class="status">{{item.rentMoney}}</span></span>
                  <span class="price">收租日 <span class="status">{{item.rentMoneyDate}}号</span></span>
                </div>
              </div>
            </div>
          </i-swipeout>
        </div>
      </div>

      <div v-if="isNow" class="loadingMore">
        <i-load-more v-if="isLoadingMore" />
        <div
          v-if="isNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>

      <div v-if="isHistory" class="loadingMore">
        <i-load-more v-if="isHistoryLoadingMore" />
        <div
          v-if="isHistoryNoMoreData"
          class="noMoreData">没有更多数据了</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapMutations } from 'vuex'
import { ERR_OK, pageSize } from 'api/config'
import { getList, getHistoryList } from 'api/houseTenant'

export default {
  computed: {
    isNow () {
      return this.tabActive === 'now'
    },
    isHistory () {
      return this.tabActive === 'history'
    },
    listFilter () {
      let arr = []
      if (this.isNow) {
        arr = this.list
      } else if (this.isHistory) {
        arr = this.historyList
      }

      return arr
    }
  },
  onShow () {
    this.refreshList('init', true)
  },
  onPullDownRefresh () {
    this.refreshList('init', false)
  },
  onReachBottom () {
    this.getMoreList()
  },
  mounted () {
    this.list = []
    this.historyList = []
  },
  data () {
    return {
      tabActive: 'now',
      page: 1,
      historyPage: 1,
      list: [],
      historyList: [],
      isLoadingMore: false,
      isNoMoreData: false,
      isHistoryLoadingMore: false,
      isHistoryNoMoreData: false
    }
  },
  methods: {
    tabChange (e) {
      this.tabActive = e.target.key
      if (this.tabActive === 'now' && this.list.length === 0) {
        this.page = 1
        this.getList('init', true)
      } else if (this.tabActive === 'history' && this.historyList.length === 0) {
        this.historyPage = 1
        this.getHistoryList('init', true)
      }
    },
    detailClick (item) {
      this.SET_CURRENTITEM(item)
      this.SET_ACTIONKEY('read')
      wx.navigateTo({
        url: '/pages/contractDetail/main'
      })
    },
    getMoreList () {
      if (this.isNow) {
        if (this.isNoMoreData) {
          return
        }
        this.isLoadingMore = true
        this.page += 1
        this.getList('more', false)
      } else if (this.isHistory) {
        if (this.isNoMoreData) {
          return
        }
        this.isHistoryLoadingMore = true
        this.historyPage += 1
        this.getHistoryList('more', false)
      }
    },
    refreshList (type, isShowLoading) {
      if (this.isNow) {
        this.page = 1
        this.getList(type, isShowLoading)
      } else if (this.isHistory) {
        this.historyPage = 1
        this.getHistoryList(type, isShowLoading)
      }
    },
    async getList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getList(this.page)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.list = res.rows
          this.isNoMoreData = false
          this.isLoadingMore = false
        } else if (type === 'more') {
          this.list = [...this.list, ...res.rows]
          this.isLoadingMore = false
        }
      }

      if (res.rows.length < pageSize) {
        this.isNoMoreData = true
      }
    },
    async getHistoryList (type = 'init', isShowLoading = true) {
      if (isShowLoading) {
        this.$showLoading('加载中')
      }

      const res = await getHistoryList(this.historyPage)

      if (isShowLoading) {
        wx.hideLoading()
      } else {
        wx.stopPullDownRefresh()
      }

      if (res.code === ERR_OK) {
        if (type === 'init') {
          this.historyList = res.rows
          this.isHistoryNoMoreData = false
          this.isHistoryLoadingMore = false
        } else if (type === 'more') {
          this.historyList = [...this.historyList, ...res.rows]
          this.isHistoryLoadingMore = false
        }
      }

      if (res.rows.length < pageSize) {
        this.isHistoryNoMoreData = true
      }
    },
    ...mapMutations({
      SET_CURRENTITEM: 'contractDetail/SET_CURRENTITEM',
      SET_ACTIONKEY: 'contractDetail/SET_ACTIONKEY'
    })
  }
}
</script>

<style lang="scss" scoped>
  @import '~common/scss/color';

  .houseTenant {
    width: 100%;
    height: 100%;
    position: relative;
    > .tabs {
      width: 100%;
      height: 42px;
      overflow: hidden;
    }
    > .wrapper {
      width: 100%;
      height: calc(100% - 42px);
      position: relative;
      > .list {
        width: 100%;
        > .detail {
          .list-swipeout {
            > .info {
              color: black;
              > .title {
                font-size: 16px;
              }
              > .local {
                margin: 2px 0;
              }
              > .desc {
                 .status {
                  margin-right: 10px;
                  color: $color-default;
                  &.yes {
                    color: $color-success;
                  }
                  &.no {
                    color: $color-error;
                  }
                  &.remind {
                    color: $color-warning;
                  }
                }
              }
            }
          }
          .detail-btn {
            height: 100%;
            display: flex;
            > .btn {
              flex: 1;
              height: 100%;
              background-color: $color-default;
              color: white;
              display: flex;
              align-items: center;
              justify-content: center;
            }
          }
        }
      }
    }
  }
</style>
